<template>
  <div class="upload-result-container">
    <div class="result-header">
      <h3 class="result-title">上传结果</h3>
      <div class="result-actions">
        <el-button 
          type="primary" 
          :icon="PictureFilled"
          @click="goToLibrary"
        >
          查看素材库
        </el-button>
        <el-button 
          :icon="Upload"
          @click="handleContinueUpload"
        >
          继续上传
        </el-button>
      </div>
    </div>
    
    <div class="result-summary">
      <div class="summary-item">
        <div class="summary-value">{{ uploadedImages.length }}</div>
        <div class="summary-label">上传成功</div>
      </div>
      <div class="summary-item">
        <div class="summary-value">{{ aiRecognizedCount }}</div>
        <div class="summary-label">AI识别成功</div>
      </div>
      <div class="summary-item">
        <div class="summary-value">{{ aiPendingCount }}</div>
        <div class="summary-label">AI识别中</div>
      </div>
      <div class="summary-item">
        <div class="summary-value">{{ aiFailedCount }}</div>
        <div class="summary-label">AI识别失败</div>
      </div>
    </div>
    
    <div class="result-grid">
      <div 
        v-for="image in uploadedImages" 
        :key="image.id"
        class="result-item"
      >
        <div class="image-container">
          <img :src="image.fileUrl" :alt="image.name" class="image-preview" />
          <div class="image-overlay">
            <div class="ai-status" :class="getAiStatusClass(image.aiRecognitionStatus)">
              {{ getAiStatusText(image.aiRecognitionStatus) }}
            </div>
          </div>
        </div>
        
        <div class="image-info">
          <div class="image-name">{{ image.originalName }}</div>
          <div class="image-meta">
            <span>{{ formatFileSize(image.fileSize) }}</span>
            <span>{{ image.width }}×{{ image.height }}</span>
          </div>
          
          <div class="image-tags" v-if="image.tags && image.tags.length > 0">
            <el-tag 
              v-for="tag in image.tags.slice(0, 3)" 
              :key="tag"
              size="small"
              class="tag-item"
            >
              {{ tag }}
            </el-tag>
            <el-tag 
              v-if="image.tags.length > 3"
              size="small"
              type="info"
              class="tag-item"
            >
              +{{ image.tags.length - 3 }}
            </el-tag>
          </div>
          
          <div class="image-actions">
            <el-button 
              type="primary" 
              :icon="View"
              size="small"
              @click="handleViewImage(image)"
            >
              查看
            </el-button>
            <el-button 
              type="success" 
              :icon="Edit"
              size="small"
              @click="handleGenerateText(image)"
            >
              生成文案
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <div v-if="uploadedImages.length === 0" class="empty-result">
      <el-icon size="48" color="rgba(255,255,255,0.5)"><Picture /></el-icon>
      <p>暂无上传结果</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { Upload, View, Edit, Picture, PictureFilled } from '@element-plus/icons-vue'
import type { ImageModel } from '@/types'
import { formatFileSize } from '@/utils'

interface Props {
  uploadedImages: ImageModel[]
}

interface Emits {
  (e: 'view-image', image: ImageModel): void
  (e: 'generate-text', image: ImageModel): void
  (e: 'continue-upload'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const router = useRouter()

// 计算属性
const aiRecognizedCount = computed(() => {
  return props.uploadedImages.filter(img => img.aiRecognitionStatus === 'SUCCESS').length
})

const aiPendingCount = computed(() => {
  return props.uploadedImages.filter(img => img.aiRecognitionStatus === 'PENDING').length
})

const aiFailedCount = computed(() => {
  return props.uploadedImages.filter(img => img.aiRecognitionStatus === 'FAILED').length
})

// 方法
const getAiStatusClass = (status: string) => {
  switch (status) {
    case 'SUCCESS': return 'status-success'
    case 'FAILED': return 'status-failed'
    default: return 'status-pending'
  }
}

const getAiStatusText = (status: string) => {
  switch (status) {
    case 'SUCCESS': return 'AI识别成功'
    case 'FAILED': return 'AI识别失败'
    default: return 'AI识别中'
  }
}

const handleViewImage = (image: ImageModel) => {
  emit('view-image', image)
}

const handleGenerateText = (image: ImageModel) => {
  emit('generate-text', image)
}

const handleContinueUpload = () => {
  emit('continue-upload')
}

const goToLibrary = () => {
  router.push({ name: 'Library' })
}
</script>

<style scoped>
.upload-result-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
  color: white;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.result-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.result-actions {
  display: flex;
  gap: 10px;
}

.result-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
}

.summary-item {
  text-align: center;
}

.summary-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: #409EFF;
}

.summary-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.result-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.result-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.result-item:hover .image-preview {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

.ai-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-success {
  background-color: rgba(103, 194, 58, 0.8);
}

.status-failed {
  background-color: rgba(245, 108, 108, 0.8);
}

.status-pending {
  background-color: rgba(230, 162, 60, 0.8);
}

.image-info {
  padding: 15px;
}

.image-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.image-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.image-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}

.tag-item {
  cursor: default;
}

.image-actions {
  display: flex;
  gap: 10px;
}

.empty-result {
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-result p {
  margin-top: 15px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .result-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .result-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .result-grid {
    grid-template-columns: 1fr;
  }
  
  .image-actions {
    flex-direction: column;
  }
}
</style>